import React, { Component } from "react";
import styles from "./ThinkTank.module.scss";
import sociology from "./../../images/icon_sociology@2x.png";
import union from "./../../images/icon_union@2x.png";
import activity from "./../../images/icon_activity@2x.png";
import evaluate from "./../../images/icon_evaluate@2x.png";
import list from "./../../images/icon_list@2x.png";
import api from "./../../serve/api";
import { withRouter } from "react-router-dom";
import placeholder from "./../../images/placeholder.jpg";

const ttImg1 = [
  {
    title: "关于联盟",
    image: union
  },
  {
    title: "联盟活动",
    image: activity
  }
];

const ttImg2 = [
  {
    title: "关于评价",
    image: evaluate
  },
  {
    title: "智库榜单",
    image: list
  }
];

const tabs = ["智库联盟", "智库评价"];

let parents = [];

class ThinkTank extends Component {
  constructor(props) {
    super(props);
    this.state = {
      types: [],
      thinkTanks: [],
      centerLeft: "",
      centerLeftType: "",
      centerLeftId: "",
      center: "",
      centerType: "",
      centerId: "",
      centerRight: "",
      centerRightId: "",
      centerRightType: "",
      centerBLeft: "",
      centerBLeftId: "",
      centerBType: "",
      centerBRight: "",
      centerBRightId: "",
      centerBRightType: "",
      alliances: {},
      onMouseEnterImage: null,
      onMouseEnterIndex: 0,
      onMouseEnterIndexs: [],
      current: 0,
      selectIds: [],
      activities: [], //联盟活动列表
      evaluation: {}, //智库评价
      evaluateType: []
    };
  }

  componentDidMount() {
    this.getThinkTankType();
    this.getCenterLeft();
    this.getCenter();
    this.getCenterRight();
    this.getCenterBottomLeft();
    this.getCenterBottomRight();
    this.getAlliance();
    this.getActivity();
    this.getEvaluationType();
  }

  componentWillUnmount() {
    this.setState({
      selectIds: []
    });
    parents = [];
  }

  async getThinkTankType() {
    const data = await api.fetchListThinkTankTypeAll();
    if (data && data.code === "000000") {
      const array = data.result;
      array.forEach(item => {
        this.getThinkTank(item.id);
      });
      this.setState({
        types: array
      });
    }
  }

  async getThinkTank(typeId) {
    const data = await api.fetchListThinkTank({ page: 1, pageSize: 4, typeId });
    if (data && data.code === "000000") {
      let { thinkTanks } = this.state;
      thinkTanks.push(data.result);

      let selectIds = [];
      thinkTanks.forEach((tt, i) => {
        tt.forEach((tt1, index) => {
          if (index === 0) {
            selectIds.push(tt1.id);
          }
        });
      });

      if (selectIds.length > 8) {
        selectIds.forEach(id => {
          let firstId = [];
          firstId.push(id);
          parents.push(firstId);
        });
      }
      parents = parents.filter((ids, index, array) => {
        return array.indexOf(ids) === index;
      });
      this.setState({
        selectIds,
        thinkTanks
      });
    }
  }

  async getCenterLeft() {
    const data = await api.listAdverApi({
      page: 1,
      pageSize: 1,
      position: "2-1"
    });
    if (data && data.code === "000000") {
      if (data.result.length > 0) {
        this.setState({
          centerLeft: data.result[0].img,
          centerLeftType: data.result[0].type,
          centerLeftId: data.result[0].theme_ad_id
        });
      }
    }
  }

  async getCenter() {
    const data = await api.listAdverApi({
      page: 1,
      pageSize: 1,
      position: "2-2"
    });
    if (data && data.code === "000000") {
      if (data.result.length > 0) {
        this.setState({
          center: data.result[0].img,
          centerType: data.result[0].type,
          centerId: data.result[0].theme_ad_id
        });
      }
    }
  }

  async getCenterRight() {
    const data = await api.listAdverApi({
      page: 1,
      pageSize: 1,
      position: "2-3"
    });
    if (data && data.code === "000000") {
      if (data.result.length > 0) {
        this.setState({
          centerRight: data.result[0].img,
          centerRightType: data.result[0].type,
          centerRightId: data.result[0].theme_ad_id
        });
      }
    }
  }

  async getCenterBottomLeft() {
    const data = await api.listAdverApi({
      page: 1,
      pageSize: 1,
      position: "2-4"
    });
    if (data && data.code === "000000") {
      if (data.result.length > 0) {
        this.setState({
          centerBLeft: data.result[0].img,
          centerBType: data.result[0].type,
          centerBLeftId: data.result[0].theme_ad_id
        });
      }
    }
  }

  async getCenterBottomRight() {
    const data = await api.listAdverApi({
      page: 1,
      pageSize: 1,
      position: "2-5"
    });
    if (data && data.code === "000000") {
      if (data.result.length > 0) {
        this.setState({
          centerBRight: data.result[0].img,
          centerBRightType: data.result[0].type,
          centerBRightId: data.result[0].theme_ad_id
        });
      }
    }
  }

  async getAlliance() {
    const data = await api.listAlliance();
    if (data && data.code === "000000") {
      this.setState({
        alliances: data.result
      });
    }
  }

  async getActivity() {
    const data = await api.listOrgApi({ page: 1, pageSize: 1 });
    if (data && data.code === "000000") {
      this.setState({
        activities: data.result
      });
    }
  }

  async getEvaluationType() {
    const { code, result } = await api.listEvaluationTypeApi();
    if (code !== "000000") {
      return;
    }
    if (result.length > 0) {
      this.setState({
        evaluateType: result
      });
      const first = result[0];
      this.getEvaluation(first.id);
    }
  }

  async getEvaluation(typeId) {
    const { code, result } = await api.listEvaluationApi({
      typeId,
      page: 1,
      pageSize: 1
    });
    if (code !== "000000") {
      return;
    }
    if (result.length > 0) {
      this.setState({
        evaluation: result[0]
      });
    }
  }

  //专业智库更多
  onMore(item) {
    this.props.history.push(`/mainPage/thinkTank?id=${item.id}`);
  }

  //智库联盟更多
  onTTMore(index) {
    this.props.history.push(
      index === 0 ? "/mainPage/org" : "/mainPage/evaluation"
    );
  }

  //关于联盟
  onAbout(index) {
    if (index === 0) {
      this.props.history.push("/mainPage/org?type=about");
    } else {
      this.props.history.push("/mainPage/org?type=activity");
    }
  }

  //关于评价
  onComment(item) {
    this.props.history.push(`/mainPage/evaluation?id=${item.id}`);
  }

  onTTItem(item) {
    if (item) {
      this.props.history.push(`/mainPage/pageDetail/thinkTank/${item.id}`);
    }
  }

  //智库联盟详情
  onInfo(id, index) {
    if (index === 0) {
      this.props.history.push(`/mainPage/commonDetail/org/${id}`);
    } else {
      this.props.history.push(`/mainPage/commonDetail/evaluation/${id}`);
    }
  }

  mouseEnter(el, index, tts) {
    tts.forEach(value => {
      parents.forEach((ids, index, array) => {
        if (value.id === ids[0]) {
          array[index] = [el.id];
        }
      });
    });
    let selectIds = [].concat(...parents);
    selectIds = selectIds.filter((item, index, array) => {
      return array.indexOf(item) === index;
    });
    this.setState({
      selectIds,
      onMouseEnterIndex: index,
      onMouseEnterImage: el.img_url
    });
  }
  clientThemeAd(type, id) {
    console.log("type", type);
    if (type == "2") this.props.history.push("/mainPage/themeAd/" + id);
  }

  onQA() {
    this.props.history.push("/mainPage/QA");
  }

  render() {
    const {
      types,
      alliances,
      thinkTanks,
      onMouseEnterImage,
      onMouseEnterIndex,
      selectIds,
      activities,
      evaluation,
      evaluateType
    } = this.state;
    return (
      <div className={styles.think_tank}>
        <div className={styles.header} />
        <div className={styles.content}>
          <ul>
            {types &&
              types.map((item, index) => {
                let tts = [];
                thinkTanks.forEach(tt => {
                  if (tt.length > 0 && item.id === tt[0].type_id) {
                    tts = tt;
                  }
                });
                return (
                  <li key={index}>
                    <div className={styles.type_bg}>{item.name || ""}</div>
                    <span onClick={() => this.onMore(item)}>【更多】</span>
                    <div className={styles.info}>
                      {tts[0] && tts[0].img_url && (
                        <img
                          src={
                            onMouseEnterIndex === index && onMouseEnterImage
                              ? onMouseEnterImage
                              : tts[0] && tts[0].img_url
                          }
                          alt=""
                        />
                      )}
                      {!tts[0] && <img src={placeholder} alt="" />}
                      <div className={styles.info_content}>
                        <div className={styles.news_list}>
                          {tts.map((el, i) => {
                            if (selectIds.includes(el.id)) {
                              return (
                                <div
                                  className={styles.list_li_active}
                                  key={i}
                                  onMouseEnter={() =>
                                    this.mouseEnter(el, index, tts)
                                  }
                                >
                                  <h3 onClick={() => this.onTTItem(el)}>
                                    {el.title || ""}
                                  </h3>
                                  <span>{el.description || ""}</span>
                                </div>
                              );
                            } else {
                              return (
                                <div
                                  className={styles.list_li}
                                  key={i}
                                  onClick={() => this.onTTItem(el)}
                                  onMouseEnter={() =>
                                    this.mouseEnter(el, index, tts)
                                  }
                                >
                                  <span />
                                  <p>{el.title || ""}</p>
                                </div>
                              );
                            }
                          })}
                        </div>
                      </div>
                    </div>
                  </li>
                );
              })}
          </ul>
        </div>
        {/* 中部图片 */}
        <div className={styles.images}>
          <div className={styles.three_images}>
            <img
              src={this.state.centerLeft}
              alt=""
              onClick={() =>
                this.clientThemeAd(
                  this.state.centerLeftType,
                  this.state.centerLeftId
                )
              }
            />
            <img
              src={this.state.center}
              alt=""
              onClick={() =>
                this.clientThemeAd(this.state.centerType, this.state.centerId)
              }
            />
            <img
              src={this.state.centerRight}
              alt=""
              onClick={() =>
                this.clientThemeAd(
                  this.state.centerRightType,
                  this.state.centerRightId
                )
              }
            />
          </div>
          <div className={styles.two_images}>
            <img
              src={this.state.centerBLeft}
              alt=""
              onClick={() =>
                this.clientThemeAd(
                  this.state.centerBType,
                  this.state.centerBLeftId
                )
              }
            />
            <img
              src={this.state.centerBRight}
              alt=""
              onClick={() =>
                this.clientThemeAd(
                  this.state.centerBRightType,
                  this.state.centerBRightId
                )
              }
            />
          </div>
        </div>
        <div className={styles.survey} onClick={() => this.onQA()}>
          <img src={sociology} alt="" />
          社会调查服务
        </div>
        <div className={styles.tt_league}>
          <div className={styles.auto_div}>
            {ttImg1.map((item, index) => {
              return (
                <div className={styles.tt_league_item} key={index}>
                  <div className={styles.title_div}>
                    {tabs[index]}
                    <span onClick={() => this.onTTMore(index)}>【更多】</span>
                  </div>
                  <div className={styles.tt_content}>
                    <img src={alliances.img_url || placeholder} alt="" />
                    <div className={styles.tt_info}>
                      {index === 0 && (
                        <div>
                          <h1
                            onClick={() =>
                              this.onInfo(
                                activities && activities[0] && activities[0].id,
                                index
                              )
                            }
                          >
                            {(activities &&
                              activities[0] &&
                              activities[0].title) ||
                              ""}
                          </h1>
                          <span>
                            {(activities &&
                              activities[0] &&
                              activities[0].sub_title) ||
                              ""}
                          </span>
                        </div>
                      )}
                      {index === 1 && (
                        <div>
                          <h1
                            onClick={() =>
                              this.onInfo(evaluation && evaluation.id, index)
                            }
                          >
                            {(evaluation && evaluation.title) || ""}
                          </h1>
                          <span>
                            {(evaluation && evaluation.sub_title) || ""}
                          </span>
                        </div>
                      )}
                    </div>
                  </div>
                  <div className={styles.tt_tabs}>
                    {index === 0 &&
                      ttImg1.map((value, i) => {
                        return (
                          <div
                            className={styles.tabs_img_div}
                            key={i}
                            onClick={() => this.onAbout(i)}
                          >
                            <img src={value.image} alt="" />
                            {value.title}
                          </div>
                        );
                      })}
                    {index === 1 &&
                      evaluateType.slice(0, 2).map((item, i) => {
                        return (
                          <div
                            className={styles.tabs_img_div}
                            key={i}
                            onClick={() => this.onComment(item)}
                          >
                            <img src={ttImg2[i].image} alt="" />
                            {item.name || ""}
                          </div>
                        );
                      })}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}
export default withRouter(ThinkTank);
